<template>
  <!-- 隐患处理 转办-->
  <view class="container">
    <view class="hidden-title">转办信息</view>
    <uni-forms ref="form" :model-value="form" :rules="rules" labelWidth="70vw" labelPosition="top">
      <cu-cell-group>
        <uni-forms-item name="deptId">
          <cu-cell
            title="所属部门"
            required
            link
            placeholder="请选择"
            :description="form.deptName"
            @click="deptClick()"
          >
          </cu-cell>
        </uni-forms-item>
        <uni-forms-item name="reason" label="">
          <cu-cell title="转办原因" required column>
            <textarea
              v-model="form.reason"
              class="text-area"
              placeholder-class="placeholder__style"
              placeholder="请根据实际情况简要说明转办原因(限50字)"
              maxlength="50"
            />
          </cu-cell>
        </uni-forms-item>

        <uni-forms-item>
          <cu-cell title="转办人">
            <view v-if="form.deptId && !form.users.length" class="text-red text-right">
              未设置转办人，请联系管理员配置！
            </view>
            <view class="text-right">{{ usersLabel }}</view>
          </cu-cell>
        </uni-forms-item>
      </cu-cell-group>
    </uni-forms>
    <view class="submit-group">
      <button @click="submit" class="u-button" type="primary" :ripple="true">转办</button>
    </view>

    <dept-selector ref="deptRef" @change="deptConfirm"></dept-selector>
  </view>
</template>

<script>
import CuCellGroup from '@/components/cu-cell/cu-cell-group.vue'
import CuCell from '@/components/cu-cell/cu-cell.vue'
import DeptSelector from '@/components/dept-selector/index.vue'
import { complaintHiddenDangerReview, managerUserListByDeptId } from '@/api/dbd/hiddenDangerDeal'
export default {
  components: {
    CuCellGroup,
    CuCell,
    DeptSelector
  },
  data() {
    return {
      form: {
        deptId: '',
        deptName: '',
        reason: '',
        users: []
      },
      rules: {
        deptId: {
          rules: [
            {
              required: true,
              errorMessage: '所属部门不能为空'
            }
          ]
        },
        reason: {
          rules: [
            {
              required: true,
              errorMessage: '转办原因不能为空'
            }
          ]
        }
      }
    }
  },
  onReady() {
    this.$refs.form.setRules(this.rules)
  },
  onLoad({ managerId }) {
    this.managerId = managerId
  },
  computed: {
    usersLabel() {
      return this.form.users
        .map((item) => {
          return item.staffUserName
        })
        .join('、')
    }
  },
  methods: {
    async submit() {
      await this.$refs.form.validate()
      if (!this.form.users.length) {
        this.$modal.showToast('未设置转办人，请联系管理员配置！')
        return
      }
      uni.showLoading({
        title: '提交中',
        mask: true
      })
      await complaintHiddenDangerReview({
        ...this.form,
        managerId: this.managerId
      }).finally(() => {
        uni.hideLoading()
      })
      this.$modal.showToast('转办成功')
      const t = setTimeout(() => {
        uni.navigateBack({
          delta: 2
        })
        clearTimeout(t)
      }, 1000)
    },
    deptClick() {
      this.$refs.deptRef.open()
    },
    deptConfirm(obj) {
      this.form.deptName = obj.name
      this.form.deptId = obj.id
      managerUserListByDeptId({
        deptId: obj.id,
        settingType: 1 // 1审核 2审批
      }).then(({ data }) => {
        this.form.users = data || []
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  padding-bottom: 200rpx;
  .background-white {
    background-color: #fff;
    padding: 20rpx 30rpx;
    box-sizing: border-box;

    .uni-forms-item__label {
      color: #333;
      font-size: 30rpx;
    }

    .bor-btm {
      display: flex;
      border-bottom: 1px solid #d5d7e3;
    }

    .photo {
      display: flex;
      justify-content: space-between;

      image {
        width: 214rpx;
        height: 214rpx;
      }
    }
  }
}

.hidden-title {
  background: #f5f5f5;
  padding: 20rpx;
  color: #999;
}

.bor-bottom {
  border-bottom: 1rpx solid #f5f5f5;
}

.submit-group {
  background: #fff;
  z-index: 9;
  padding: 12px;
  padding-bottom: calc(12px + constant(safe-area-inset-bottom));
  padding-bottom: calc(12px + env(safe-area-inset-bottom));
  uni-button {
    flex: 1;
    flex-shrink: 0;
  }
}
</style>
